<template>
	<view class="" style="background-color: #d70127;">
		<view class="content">
			<!-- <u-icon name="arrow-left" color="#fff" class="backIcon" size="26" @click="back"></u-icon> -->
			<view class="topOne">
				<image src="/static/image/index_text1.png" mode="" class="indexText"></image>
			</view>
			<view class="topTwo">
				<view class="line">
				</view>
				<view class="text2"> 消费共创价值，共享价值收入 </view>
				<view class="line">
				</view>
			</view>
			<view class="" style="display: flex;justify-content: center;margin-top: 85rpx;">
				<image src="/static/image/login_text.png" mode="widthFix"></image>
			</view>
			<view class="box">
				<view class="df-sb" style="margin-top: 80rpx;">
					<view class="phoneText" style=""> 账号 </view>
					<view class="ipt">
						<input type="text" placeholder="请输入用户账号" style="	font-size: 32rpx;color: #FDE8CE;"
							placeholder-class="placeholderStyle" v-model="phone" />
					</view>
				</view>
				<view class="df-sb" style="margin-top: 80rpx;">
					<view class="phoneText" style=""> 密码 </view>
					<view class="ipt">
						<input type="password" placeholder="请输入密码" style="	font-size: 32rpx;color: #FDE8CE;"
							placeholder-class="placeholderStyle" v-model="password" />
					</view>
				</view>
				<!-- 		<view class="df-sb" style="margin-top: 80rpx;">
				<view class="phoneText" style=""> 验证码 </view>
				<view class="ipt df-flex">
					<input type="text" placeholder="请输入验证码"
						style="	font-size: 26rpx;color: #FDE8CE;height: 30rpx;line-height: 30rpx;"
						placeholder-class="placeholderStyle" v-model="code" />
					<view class="" style="color:#FDE8CE;height: 30rpx;line-height: 30rpx;"> | </view>
					<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
					<view class=""
						style="color:#FDE8CE;margin-left:12rpx;height:30rpx;line-height: 30rpx;font-size: 22rpx;"
						@click="getCode"> {{tips}} </view>
				</view>
			</view> -->
				<view class="df-sb">
					<view class="register" @click="$navTo('/pages/register')">点击去注册 </view>
					<view class="register" @click="$navTo('/pages/forget')">忘记密码 </view>
				</view>
				<button class="loginBtn" @click="login"> 登录 </button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getSmsCode,
		userLogin,
		passwordLogin
	} from '../request/api.js'
	export default {
		data() {
			return {
				phone: '',
				tips: '',
				seconds: 60,
				code: '',
				password: ''
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会
			// 造成循环引用而报错，如果你想这样做，请在非data中定义refCode变量
			this.refCode = this.$refs.uCode;
		},
		onLoad() {},
		onShow() {},
		methods: {
			login() {
				passwordLogin({
					phone: this.phone,
					password: this.password
					// code: this.code
				}).then(res => {
					if (res.code == 200) {
						uni.setStorageSync('token', res.result.token)
						uni.setStorageSync('userInfo', res.result.userInfo)
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/index'
							})
						}, 2000)
						// if (res.result.userInfo.idCard) {
						// 	uni.showToast({
						// 		title: res.message,
						// 		icon: 'none'
						// 	})
						// 	setTimeout(() => {
						// 		uni.navigateTo({
						// 			url: '/pages/index'
						// 		})
						// 	}, 2000)
						// } else {
						// 	uni.showToast({
						// 		title: '请先实名认证',
						// 		icon: 'none'
						// 	})
						// 	setTimeout(() => {
						// 		uni.navigateTo({
						// 			url: '/pages/real'
						// 		})
						// 	}, 2000)
						// }
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (!this.phone) {
					uni.$u.toast('请输入手机号');
					return;
				}
				if (this.$refs.uCode.canGetCode) {
					getSmsCode({
						phone: this.phone
					}).then(res => {
						if (res.code == 200) {
							uni.$u.toast(res.message);
							this.code = res.result;
							// uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			// 返回按钮
			back() {
				uni.navigateBack()
			},
		}
	}
</script>
<style lang="scss">
	.content {
		height: 100vh;
		background: url('/static/image/bg2.png') no-repeat center center;
		background-size: 100% 100%;
		padding: 0 30rpx;
		padding-bottom: 200rpx;
		overflow: hidden;

		.backIcon {
			margin-top: 50rpx;
		}

		.topOne {
			justify-content: center;
			display: flex;
			margin-bottom: 45rpx;

			.indexText {
				width: 500rpx;
				height: 170rpx;
				padding-top: 80rpx;
			}
		}

		.topTwo {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			// margin-bottom: 60rpx;
			.line {
				width: 690rpx;
				height: 1px;
				border-top: 1rpx solid;
				border-image: linear-gradient(270deg, rgba(252, 238, 220, 0), rgba(255, 250, 243, 1), rgba(252, 238, 220, 0)) 1 1;
			}

			.text2 {
				width: 480rpx;
				height: 31rpx;
				font-size: 32rpx;
				color: #FDE8CE;
				line-height: 31rpx;
				text-align: left;
				font-style: normal;
				text-align: center;
				margin: 13rpx 0;
			}
		}

		.box {
			width: 100%;
			height: 552rpx;
			// background: #d70127;
			padding: 0 50rpx;
			overflow: hidden;
		}
	}

	.phoneText {
		font-size: 32rpx;
		color: #FDE8CE;
		font-weight: 600;
		height: 50rpx;
	}

	.ipt {
		height: 50rpx;
		line-height: 50rpx;
		margin-left: 40rpx;
		border-bottom: 1px solid #FDE8CE;
		width: 458rpx;
	}

	.loginBtn {
		width: 256rpx;
		height: 50rpx;
		line-height: 50rpx;
		background: linear-gradient(#BA986B 0%, #F1DBB6 100%);
		border-radius: 37rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #2B1D14;
		text-align: center;
		margin-top: 145rpx;
	}

	.register {
		text-align: right;
		color: #FDE8CE;
		margin-top: 40rpx;
		font-size: 32rpx;
	}

	.placeholderStyle {
		color: #FDE8CE
	}
</style>